<template>
  <div class="cube">
    <div class="cube-left"
      :class="{'make-up': makeUp, hoz: hoz}">
      <div class="cube-name-box"
        ref="cubeName">
        <!-- text goed here -->
        <p class="cube-name"
          ref="nameText"></p>
      </div>
      <div class="cube-value-box"
        ref="cubeValBox"
        v-if="cubeData.value !== undefined"
        :class="[cubeData.valueUnit !== '%'? 'bothside': '']">
        <!-- {{cubeData.value}} -->
        <span class="cube-value"
          ref="cubeVal"></span>
        <span class="cube-value-unit">{{cubeData.valueUnit}}</span>
      </div>
    </div>
    <div class="cube-right"
      ref="cubeRight"
      v-if="cubeData.riseValue || cubeData.dropValue">
      <div class="dimension">{{cubeData.dimension || '同比'}}</div>
      <div class="dim-value-box"
        :class="[cubeData.riseValue?'rise':'drop']">
        <!-- {{cubeData.riseValue || cubeData.dropValue}} -->
        <span class="acens dim-value"
          ref="dimVal"></span>
        <span class="dim-value-unit">{{cubeData.riseUnit || cubeData.dropUnit}}</span>
        <span class="dim-symbol"
          ref="dimSymbol">
          <svg xmlns="http://www.w3.org/2000/svg"
            class="svg-symbol"
            width="9.88"
            height="9.32"
            viewBox="0 0 9.88 9.32">
            <path id="Rectangle_896_copy_7"
              data-name="Rectangle 896 copy 7"
              class="cls-1"
              d="M1867.71,1224.29v3.66l-0.71.71-0.71-.71v-3.66h-4.24l4.95-4.95,4.95,4.95h-4.24Z"
              transform="translate(-1862.06 -1219.34)" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'Cube',
  components: {},
  model: {},
  props: {
    cubeData: {
      type: Object,
      default: () => {},
      required: true,
      validator: function(cube) {
        const { riseValue, dropValue } = cube
        // riseValue 和 dropValue 不能同时存在
        if (riseValue === undefined && dropValue === undefined) {
          return true
        }
        return (
          (riseValue === undefined || dropValue === undefined) &&
          !(riseValue === undefined && dropValue === undefined)
        )
      }
    },
    makeUp: {
      type: Boolean,
      default: false
    },
    hoz: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init() {
      let tl = new TimelineMax({}),
        _this = this,
        cubeName = TweenMax.to(this.$refs.cubeName, 0.5, {
          opacity: 1,
          transform: 'scaleX(1)'
        }),
        nameText = TweenMax.to(this.$refs.nameText, 0.5, {
          scrambleText: {
            text: this.cubeData.name,
            chars: '_',
            speed: 0.3
          }
        })
      // 添加时间线
      tl.add(cubeName, 0).add(nameText, 0.2)
      if (this.cubeData.value !== undefined) {
        /* _this.$refs.cubeVal.style.width = _this.computedWidth(
          _this.$refs.cubeVal,
          this.cubeData.value
        ) */
        let step = 0.1
        if(this.isInteger(this.cubeData.value)){
          step = 1
        }
        const cubeValBox = TweenMax.to(this.$refs.cubeValBox, 0.5, {
            opacity: 1,
            scaleX: 1
          }),
          val = { num: 0 },
          cubeVal = TweenMax.to(val, 0.5, {
            num: this.cubeData.value,
            roundProps: { num: step },
            onUpdate: function() {
              _this.$refs.cubeVal.textContent = val.num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            }
          })
        // 添加时间线
        tl.add(cubeValBox, 0.4).add(cubeVal, 0.6)
      }
      if (this.cubeData.riseValue || this.cubeData.dropValue) {
        const cubeRight = TweenMax.to(this.$refs.cubeRight, 0.3, {
            opacity: 1
          }),
          dVal = { num: 0 },
          dimVal = TweenMax.to(dVal, 0.5, {
            num: this.cubeData.riseValue || this.cubeData.dropValue,
            roundProps: {
              num: 0.1 //round y to nearest increment of 0.1
            },
            onUpdate: function() {
              _this.$refs.dimVal.textContent = dVal.num
            }
          }),
          dimSymbol = TweenMax.to(this.$refs.dimSymbol, 0.5, {
            transform: 'translateY(0)'
          })
        // 添加时间线
        tl.add(cubeRight, 0.6)
          .add(dimVal, 0.7)
          .add(dimSymbol, 0.8)
      }
      return tl
    },
    computedWidth(ele, value) {
      let dom = {}
      if (ele instanceof HTMLElement) {
        dom = ele
      } else {
        dom = document.querySelector('body')
      }
      const { fontSize, fontFamily } = window.getComputedStyle(dom)
      // 创建元素
      const span = document.createElement('span')
      span.style.fontSize = fontSize
      span.style.fontFamily = fontFamily
      span.textContent = value
      span.style.display = 'inline-block'
      span.style.visibility = 'hidden'
      document.body.appendChild(span)
      const { width } = span.getBoundingClientRect()
      document.body.removeChild(span)

      return width + 'px'
    },
    isInteger(n) {
      return parseInt(n) == parseFloat(n)
    }
  }
}
</script>
<style lang="scss" scoped>
.cube {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  color: rgba(255, 255, 255, 0.6);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;

  .cube-left {
    width: 120px;
  }
  .cube-name-box {
    position: relative;

    height: 24px;
    padding: 2px 3px;

    background: linear-gradient(90deg, #00f6fa58, transparent) no-repeat
        content-box,
      linear-gradient(#005cf01a, #005cf01a);

    opacity: 0;

    transform: scaleX(0);
    transform-origin: center;
    &:after,
    &:before {
      display: block;

      position: absolute;
      top: 0;

      width: 5px;
      height: 24px;

      content: '';
    }
    &:after {
      right: 0;

      border: 1px solid #00f7fa;
      border-left: none;
    }
    &:before {
      left: 0;

      border: 1px solid #00f7fa;
      border-right: none;
    }
    .cube-name {
      font-size: 16px;
      line-height: 20px;
      text-align: center;
    }
  }

  .cube-value-box {
    display: flex;
    justify-content: flex-start;

    height: 16px;
    margin-top: 4px;
    padding: 0 10px;

    color: #fff;
    background-color: #00f6fa33;

    opacity: 0;

    font-size: 16px;
    // text-shadow: 1px 1px 4px #25a0ff99, 1px -1px 4px #25a0ff99,
    //   -1px 1px 4px #25a0ff99, -1px -1px 3px #25a0ff99;
    line-height: 16px;

    transform: scaleX(0);
    transform-origin: left center;
    .cube-value {
      display: inline-block;

      font-family: acens, Arial, Helvetica, sans-serif;
      font-size: 18px;
      line-height: 20px;
    }
    .cube-value-unit {
      padding-left: 2px;
    }
  }
  .bothside {
    justify-content: space-between;
  }
  .cube-right {
    padding-left: 16px;

    opacity: 0;

    font-size: 12px;
    .dim-value-box {
      display: flex;
      align-items: center;
      overflow: hidden;
      // font-size: 10px;
      .dim-value {
        // font-size: 10px;
        display: inline-block;

        min-width: 21px;

        line-height: 1;
        text-align: right;
      }
      .dim-value-unit {
        line-height: 1;
      }
      .dim-symbol {
        padding-left: 2px;

        line-height: 1;

        transform: translateY(100%);
        .svg-symbol {
          fill: currentColor;
        }
      }
    }
    .rise {
      color: #ed3445;
    }
    .drop {
      color: #2af9fa;
      .dim-symbol {
        transform: translateY(-100%);
      }
      .svg-symbol {
        transform: rotate(180deg);
      }
    }
  }
  .make-up {
    color: #00f7fa99;
    .cube-value-box {
      justify-content: center;

      height: 24px;

      background: linear-gradient(90deg, #035ef033, transparent, #035ef033);

      .cube-value {
        font-family: digital, Arial, Helvetica, sans-serif;
        font-size: 24px;
        line-height: 1;
      }
      .cube-value-unit {
        font-size: 18px;

        transform: translateY(5px);
      }
    }
  }
  .hoz {
    display: flex;

    width: 100%;
    .cube-name-box {
      flex-shrink: 0;

      min-width: 120px;
      margin-right: 16px;
    }
    .cube-value-box {
      justify-content: center;

      width: 100%;
      height: 24px;
      margin-top: 0;

      color: #00f7fa;

      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 1px 1px 6px #00f6fa33,
        1px -1px 6px #00f7fa33, -1px 1px 4px #00f7fa33, -1px -1px 6px #00f7fa33;
      .cube-value {
        padding-top: 1px;

        font-size: 24px;
        line-height: 1;
      }
      .cube-value-unit {
        font-size: 18px;

        transform: translateY(5px);
      }
    }
  }
}
</style>